<template>
<!--添加账务-->
  <div>
    <div class="add-account-box">
      <div style="display: flex;padding-left: 35px;padding-top: 11px;height: 30px" >
        <a  href="#">
          <div style="display: flex"  >
            <i class="icon-fukuanjindu" style="margin-top: 4px;margin-right: 5px;margin-left: 7px"></i>
            <h3>账务消息添加&nbsp;&nbsp;&nbsp;</h3>
          </div>
        </a>

      </div>
      <div class="add-account-box-detail">
        <el-form :model="account" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
          <div style="display: flex">
            <el-form-item label="账务类型" required>
              <el-select style="width: 100px" v-model="account.type" border @change="changeType" placeholder="请选择账务类型">
                <el-option label="支出" :value=1>支出</el-option>
                <el-option label="收入" :value=2>收入</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账务大类" required>
              <el-select v-model="account.bigAccountId"  @change="changeBigAccount" placeholder="请选择账务大类">
                <el-option
                  v-for="item in bigAccountList"
                  :key="item.bigAccountId"
                  :label="item.bigAccountName"
                  :value="item.bigAccountId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账务小类" required >
              <el-select v-model="account.smallAccountId" clearable placeholder="请选择账务小类">
                <el-option
                  v-for="item in smallAccountList"
                  :key="item.smallAccountId"
                  :label="item.smallAccountName"
                  :value="item.smallAccountId">
                </el-option>
              </el-select>
            </el-form-item>
          </div>


          <el-form-item label="支付/收款方式" required>
            <el-radio-group v-model="account.payOrTakeWay" >
              <el-radio v-for="(item,index) in payOrTakeList" :key='index' :label="item.payTakeId" border >{{ item.payTakeName }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="金额" prop="giveMoney">
            <el-input v-model="account.giveMoney" placeholder="元" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" clearable style="width: 300px"></el-input>
            <span style="font-weight: bold;font-size: 16px">&nbsp;元</span>
          </el-form-item>
          <el-form-item label="支付/付款方" prop="duiXiang">
            <el-input v-model="account.duiXiang"  maxlength="20" clearable style="width: 300px"></el-input>

          </el-form-item>
          <el-form-item label="支付/收款时间"  prop="time">
            <el-date-picker
              v-model="account.time"
              default-value
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions">
            </el-date-picker>

          </el-form-item>

          <el-form-item label="经办人" required>
            <el-tag   ><span style="font-size: 17px;font-weight: bold">{{employeeName}}</span></el-tag>
          </el-form-item>
          <el-form-item label="账务备注"  >
            <el-input type="textarea" style="width: 300px" :rows="3"
                      maxlength="50"
                      show-word-limit
                      v-model="account.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="submitForm('ruleForm')"><span style="font-weight: bold;font-size: 17px">立即创建</span></el-button>
            <el-button type="danger" :loading="loading" @click="resetForm('ruleForm')"><span style="font-size: 17px;font-weight: bold">重新填写</span></el-button>
          </el-form-item>
        </el-form>

      </div>

      </div>
  </div>
</template>

<script>
import {get,post} from "../../utils/request";

export default {
  name: "AddAccount",
  data() {
    return {
      loading:false,
      account:{
        type:2,
        bigAccountId:null,
        smallAccountId:null,
        payOrTakeWay:null,
        giveMoney:null,
        time:null,
        duiXiang:null,
        remark:null,
      },
      employeeName:null,
      bigAccountList:[],
      smallAccountList:[],
      payOrTakeList:[],
      rules: {
        type: [
          { required: true, message: '请选择财务类型', trigger: 'change' }
        ],
        bigAccount: [
          { required: true, message: '请选择财务大类', trigger: 'change' }
        ],
        smallAccount: [
          { required: true, message: '请选择财务小类', trigger: 'change' }
        ],
        giveMoney: [
          { required: true, message: '请输入金额', trigger: 'change' }
        ],
        duiXiang: [
          { required: true, message: '请输入支付/收款方', trigger: 'change' }
        ],
        time: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],

      },
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
    };
  },
  created() {
    get("/api/v1/token/showRealName").then(resp=>{
      this.employeeName=resp.data
    })
    this.account.time=new Date();
    },
  mounted() {
    get('/api/v1/bigaccount/special',{isPayTakeId:this.account.type}).then(resp=>{
      this.bigAccountList=resp.data
      this.account.bigAccountId=this.bigAccountList[0].bigAccountId
      this.changeBigAccount(this.account.bigAccountId)
    })

    get('/api/v1/paytake/find/all').then(resp=>{
      this.payOrTakeList=resp.data
      this.account.payOrTakeWay=this.payOrTakeList[0].payTakeId
    })
  },
  methods: {
    changeBigAccount(value){
      get('/api/v1/smallaccount/special',{bigAccountId:value}).then(resp=>{
        if (resp.data.length===0){
          this.account.smallAccountId=null
          this.smallAccountList=0
        }else {
          this.smallAccountList=resp.data
          this.account.smallAccountId=this.smallAccountList[0].smallAccountId
        }
      })

    },
    changeType(value){
      get('/api/v1/bigaccount/special',{isPayTakeId:value}).then(resp=>{
        this.bigAccountList=resp.data
        this.account.bigAccountId=this.bigAccountList[0].bigAccountId
        this.changeBigAccount(this.account.bigAccountId)
      })
    },
    submitForm(formName) {

      var temp=true;
      this.loading=true;
      if (this.account.type===null || this.account.type===''){
        this.$message.error("请选择账务类型")
        temp=false;
      }
      if (this.account.bigAccountId===null || this.account.bigAccountId===''){
        this.$message.error("请选择账务大类")
        temp=false
      }
      if (this.account.smallAccountId===null || this.account.smallAccountId===''){
        this.$message.error("请选择账务小类")
        temp=false
      }
      if (temp){
        this.$refs[formName].validate((valid) => {
          if (valid) {

            post('/api/v1/post/account/common',this.account).then(resp=>{
              if (resp.data){
                this.$message({
                  message: '添加账务成功',
                  type: 'success'
                });
                this.loading=false
                this.$router.push({name:'CompanyAccount'})
              }else {
                this.$message.error('添加账务失败，找开发');
              }
            }).catch(resp=>{
              this.$message.error('系统出大问题啦，找bug');
            })
          } else {
            this.$message.error("提交有误")
          }
        });
      }
      this.loading=false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.changeType(2)
      this.account.type=2
      this.account.giveMoney=null
      this.account.remark=null
      this.account.payOrTakeWay=this.payOrTakeList[0].payTakeId
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: #2c3e50;
}
h3{
  margin: 0;
}
.add-account-box-detail{
  padding-top: 20px;
  width: 1220px;
  margin-left: 30px;
  height: 560px;
  border-radius: 20px;
  background-color: #f2f2f2;
}
.add-account-box{
  height: 674px;

  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
